<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed生成计算属性 </title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    /**
     * computed 计算属性
     * setup(props,{emit,attrs,slots})
     */
    const app = Vue.createApp({
        setup(props,{emit,attrs,slots}) {
            console.log(props,emit);
            const {ref, computed} = Vue;
            const count = ref(0);
            const handleClick = () => {
                count.value += 1
            }
            // const countAddFive = computed(()=>{
            //     return count.value + 5
            // })
            let countAddFive = computed({
                get: () => {
                    return count.value + 5;
                },
                set: (param) => {
                    count.value = param - 5
                }
            });
            setTimeout(() => {
                countAddFive.value = 100;
            }, 3000)
            return {count, handleClick, countAddFive}
        },
        template: `
          <div>
          <span @click="handleClick">{{ count }} -- {{ countAddFive }}</span>
          </div>
        `
    });
    const vm = app.mount("#app");
</script>
</body>
</html>